<template>
  <!-- 卡片 面板 start -->
  <el-card class="box-card">
    <!-- 试题修改部分结构 -->
    <div v-if="this.$route.query.id" slot="header" class="clearfix">
      <span>试题修改</span>
    </div>
    <!-- 试题录入部分结构 -->
    <div v-else slot="header" class="clearfix">
      <span>试题录入</span>
    </div>
    <!-- 表单 部分 start -->
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <!-- 第一行 学科 -->
      <el-form-item label="学科" prop="userSubject">
        <el-select v-model="form.userSubject" placeholder="请选择" @change="hchangesub">
          <el-option
            v-for="(item, index) in form.subjects"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
          <!-- <el-option label="区域二" value="beijing"></el-option> -->
        </el-select>
      </el-form-item>
      <!-- 第二行 目录 -->
      <el-form-item label="目录" prop="usercatalog">
        <el-select v-model="form.usercatalog" placeholder="请选择">
          <el-option
            v-for="(item, index) in form.catalog"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- 第三行 企业 -->
      <el-form-item label="企业" prop="userCompanys">
        <el-select v-model="form.userCompanys" placeholder="请选择">
          <el-option
            v-for="item in form.Companys"
            :key="item.id"
            :label="item.shortName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- 第四行 城市 -->
      <el-form-item label="城市" prop="userCitys">
        <el-select v-model="form.userCitys" placeholder="请选择" @change="hchangecity">
          <el-option
            v-for="(item, index) in form.citys"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
        --
        <el-select v-model="form.usercitys2" placeholder="请选择">
          <el-option
            v-for="(item, index) in form.citys2"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <!-- 第五行 方向 -->
      <el-form-item label="方向" prop="userDirection">
        <el-select v-model="form.userDirection" placeholder="请选择">
          <el-option
            v-for="(item, index) in form.directions"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <!-- 第六行 题型 -->
      <el-form-item label="题型" prop="userType">
        <el-radio-group v-model="form.userType">
          <el-radio :label="1" value="1">单选</el-radio>
          <el-radio :label="2" value="2">多选</el-radio>
          <el-radio :label="3" value="3">简答</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 第七行 难度 -->
      <el-form-item label="难度" prop="userdifficulty">
        <el-radio-group v-model="form.userdifficulty">
          <el-radio :label="1">简单</el-radio>
          <el-radio :label="2">一般</el-radio>
          <el-radio :label="3">困难</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 第八行 题干-->
      <el-form-item label="题干" prop="userTag">
        <!-- 富文本 编辑器 -->
        <quill-editor
          v-model="form.content1"
          class="editor"
          :options="editorOption"
        />
      </el-form-item>
      <!-- 第九行 选项-->
      <el-form-item v-if="form.userType !== 3 " label="选项">
        <!-- 单选框 , 输入框 , 上传 -->
        <el-radio-group v-if="form.userType === 1" v-model="form.userCheck" @change="hradioChange">
          <div v-for=" (item, index) in options " :key="index" class="col">
            <div class="row">
              <!-- a 选项部分 -->
              <!-- <el-checkbox :label="item.code" ></el-checkbox> -->
              <el-radio :label="item.code" />
              <el-input v-model="item.title" />
              <!-- <el-upload
                action=""
                class="avatar-uploader"
                :http-request="hUpload"
                :show-file-list="false"
              >
                <img
                  v-if="item.imageUrl"
                  :src="item.imageUrl"
                  class="avatar"
                >
                <i v-else class="avater-text">上传图片</i>
              </el-upload> -->
              <el-upload
                ref="uploadList"
                class="avatar-uploader"
                :action="action"
                :file-list="fileList"
                :auto-upload="false"
                list-type="picture"
                :limit="limit"
                :on-change="change"
                :on-exceed="handleExceed"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
              >
                <i class="avater-text">上传图片</i>
                <div slot="tip" class="el-upload__tip" />
              </el-upload>

            </div>
          </div>
        </el-radio-group>
        <!-- 复选框 输入框 上传  -->
        <el-checkbox-group v-else-if="form.userType === 2" v-model="form.userCheckList" @change="hcheckboxChange">
          <div v-for=" (item, index) in options " :key="index" class="col">
            <div class="row">
              <!-- a 选项部分 -->
              <el-checkbox v-if="form.userType === 2" :label="item.code" />
              <!-- <el-radio :label="item.code"  v-else-if="form.userType === '单选'"></el-radio> -->
              <el-input v-model="item.title" style="width:300px;margin-left:30px" />
              <el-upload
                action=""
                class="avatar-uploader"
                :http-request="hUpload"
                :show-file-list="false"
              >
                <img
                  v-if="item.imageUrl"
                  :src="item.imageUrl"
                  class="avatar"
                >
                <i v-else class="avater-text">上传图片</i>
              </el-upload>
            </div>
          </div>
        </el-checkbox-group>
        <!-- 添加按钮部分 -->
        <div class="row">
          <el-button
            type="danger"
            :disabled="form.userType === 1 ? true : false"
            @click="haddoption"
          >+增加选项与答案</el-button>
        </div>
      </el-form-item>
      <!-- 第 十行 解析视频 -->
      <el-form-item label="解析视频">
        <el-input v-model="form.videoURL" />
      </el-form-item>
      <!-- 第十一行 答案解析-->
      <el-form-item v-model="form.userAnswer" label="答案解析" prop="userAnswer">
        <!-- 富文本 编辑器 -->
        <quill-editor
          v-model="form.userAnswer"
          class="editor"
          :options="editorOption"
        />
      </el-form-item>
      <!-- 第十二行 题目备注 -->
      <el-form-item label="题目备注:">
        <el-input v-model="form.remarks" type="textarea" />
      </el-form-item>
      <!-- 第十三行 试题标签 -->
      <el-form-item label="试题标签" prop="userTag">
        <el-select v-model="form.userTag" placeholder="请选择试题标签">
          <el-option
            v-for="(item, index) in form.tags"
            :key="index"
            :label="item.tagName"
            :value="item.tagName"
          />
        </el-select>
      </el-form-item>
      <!-- 第十四行 提交 修改 按钮 -->
      <el-form-item>
        <!-- 试题修改 修改按钮 -->
        <el-button v-if="this.$route.query.id" type="success" @click="hUpdate">确认修改</el-button>
        <!-- 试题录入 提交按钮 -->
        <el-button v-else type="primary" @click="hSubmit">确认提交</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单 部分 end -->
  </el-card>
  <!-- 卡片 面板 end -->
</template>

<script>
// 导入学科目录
import { simple } from '@/api/subjects'
import { list } from '@/api/companys'
// 导入城市接口

import { provinces } from '@/api/citys'
// 导入 方向接口
import { direction } from '@/api/constants'
// 导入 城市下区接口

import { citys } from '@/api/citys'
// 导入 学目录简单列表
import { simple as simpleDir } from '@/api//directorys'
// 导入 试题标签列表
import { list as listTag } from '@/api/tags'
// 导入 基础题库 添加
import { add, update, detail } from '@/api/basic-from'
export default {
  name: 'HeiMaMianMianIndex',
  data() {
    return {
      productForm: {
        productPicList: [],
        currentDelBtn: -1,
        loadingapp: false,
        drag: false
      },
      form: {
        subjects: [],
        catalog: [],
        Companys: [],
        citys: [],
        citys2: [],
        directions: [],
        tags: [],
        // 备注
        remarks: '',
        // 富文本编辑器1 --题干
        content1: '',
        // 学科列表 -- 双向绑定
        userSubject: null,
        // 目录列表 -- 双向绑定
        usercatalog: '',
        // 企业管理 -- 双向绑定
        userCompanys: '',
        // 城市渲染 -- 双向绑定
        userCitys: '',
        usercitys2: '',
        // 方向渲染 -- 双向绑定
        userDirection: '',
        // 题型选择 -- 双向绑定
        userType: '',
        // 题型难度 -- 双向绑定
        userdifficulty: '',
        // 试题标签 -- 双向绑定
        userTag: '',
        // 题型选择 radio  --- 双向绑定
        userCheck: '',
        // 答案解析 -- 双向绑定
        userAnswer: '',
        // 复选框的选择项  -- 双向绑定
        userCheckList: [],
        // 用户的选择项数据 --双向绑定
        userOptions: [],
        // 视频解析项 --双向绑定
        videoURL: ''
      },
      rules: {
        userSubject: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        usercatalog: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        userCompanys: [{ required: true, message: '请选择企业', trigger: 'blur' }],
        userCitys: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        userDirection: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        userType: [{ required: true, message: '请选择类型', trigger: 'blur' }],
        userdifficulty: [{ required: true, message: '请选择难度', trigger: 'blur' }],
        userTag: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        userAnswer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }]
      },
      options: [
        {
          code: 'A',
          isRight: 'false',
          title: '',
          imageUrl: ''
        },
        {
          isRight: 'false',
          title: '',
          code: 'B',
          imageUrl: ''
        },
        {
          isRight: 'false',
          code: 'C',
          title: '',
          imageUrl: ''
        },
        {
          isRight: 'false',
          code: 'D',
          title: '',
          imageUrl: ''
        }
      ],
      content: null,
      editorOption: {
        // 工具菜单栏配置
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['link', 'image', 'video'] // 链接、图片、视频
          ]
        }
      }
    }
  },
  computed: { // 这一部分直接拿过来用的
    dragOptions() {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      }
    }
  },

  // 监听列表表单的切换
  watch: {
    // 监听 城市省份的变化
    'form.userCitys': {
      async handler(newValue) {
        const res = await citys(newValue)
        this.form.citys2 = res
      },
      immediate: true
    },
    // 监听 学科列表的变化
    'form.userSubject': {
      async handler(newValue) {
        // 发送请求 获取 目录
        const res = await simpleDir(newValue)
        // 发送请求 获取标签
        const restag = await listTag(newValue)
        console.log(res.data)
        // 将获取的数据赋值给目录列表
        this.form.catalog = res.data
        // 将获取的数据赋值给标签
        this.form.tags = restag.data.items
      },
      immediate: true
    },
    // 监听路由的变化
    $route(val) {
      console.log(val.query.id)
      if (val.query.id) {
        this.loadDetail()
      } else {
        this.$refs.form.resetFields()
      }
    }
  },
  created() {
    this.loadSubject()
    this.loadCompany()
    this.loadCitys()
    this.loadDirection()
    // this.loadTags()
    if (this.$route.query.id) {
      this.loadDetail()
    }
  },
  methods: {
    // 图片上传成功的事件
    change(file, fileList) {
      const typeList = ['image/jpeg', 'image/png', 'image/jpg']
      const isLt2M = file.raw.size / 1024 / 1024 < 0.5
      if (typeList.indexOf(file.raw.type) < 0) {
        this.$message.error('上传图片只能是 jpg / png / jpeg 格式!')
        fileList.pop()
        this.fileList = fileList

        return false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 500 kb!')
        fileList.pop()
        this.fileList = fileList

        return false
      }
      this.$refs['uploadList'].submit()
    },
    handleExceed() {
      this.$message({
        message: `一个商品只能添加${this.limit}张图片。`,
        type: 'warning'
      })
    },
    handleSuccess(res, file, fileList) {
      console.log(fileList)
      console.log(res)
      fileList.forEach((element) => {
        if (element.response) {
          element.name = element.response.data
          this.imageUrlList.push(element.response.data)
        }
      })
      this.$emit('updateImgSrcList', this.imageUrlList)
    },
    handleRemove(file) {
      this.$emit('delUploadImage', file.name)
    }
  },
  // 文件列表移除文件时的钩子
  handleRemove: function(file, fileList) {
    console.log(file, fileList)
    this.dialogImageUrl = ''
  },
  uploadSectionFile: function(params) {
    // 自定义上传方法
    // console.log(params);
    var that = this
    var file = params.file // 获取上传的文件
    var fileType = file.type // 获取文件类型
    var isImage = fileType.indexOf('image') !== -1 // 判断是否是图片类型
    var file_url = that.$refs.upload_img.uploadFiles[0].url
    // console.log(file,fileType,isImage,file_url,that.$refs.upload_img);
    var isLt2M = file.size / 1024 / 1024 < 2
    if (!isLt2M) { // 判断大小
      alert('上传图片的大小不能超过 2MB!')
      that.$refs.upload_img.uploadFiles = [] // 不符合就清空已选择的图片
      return
    }
    if (!isImage) { // 文件格式
      alert('请选择图片文件！')
      that.$refs.upload_img.uploadFiles = [] // 不符合就清空已选择的图片
      return
    }
    if (isImage) {
      var img = new Image()
      img.src = file_url
      img.onload = function() {
        //  一切验证通过后调用上传方法
        that.uploadFile(file)
      }
    }
  },
  uploadFile: function(file) { // 上传的函数
    var that = this
    var formData = new FormData()
    formData.append(that.upload_name, file)
    this.$axios.post('/file/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' }})
      .then(function(res) {
        // console.log(res);
        if (res.data.status === 0) { // 成功的话将数据插入data中
          that.dialogImageUrl = res.data.data.img
          that.file_list[0] = { name: '01', url: res.data.data.img }
          // that.file_list[0]=res.data.data.img;
        } else {
          // 上传失败，清除已选择 内容 ，并提示失败原因
          that.$refs.upload_img.uploadFiles = []
          that.file_list[0] = ''
          that.$alert('图片上传异常，原因：' + res.data.data, '', {
            showConfirmButton: false,
            callback: action => {}
          })
        }
      })
  },

  // 当城市更换的时候将后面的城区清空
  hchangecity() {
    this.form.usercitys2 = ''
  },
  // 当学科改变的时候
  hchangesub(id) {
    // 1. 根据学科id获取目录和标签
    this.form.userTag = ''
    this.form.usercatalog = ''
  },
  // 题库试题的修改提交
  async LoadUpdate() {
    try {
      const res = await update()
      console.log(res)
    } catch (err) {
      console.log(err)
    }
  },
  // 基础题库列表的获取
  async loadDetail() {
    console.log(this.$route.query.id)
    try {
      const res = await detail({ id: this.$route.query.id })
      console.log(res)
      // 将获取的数据赋值给数据项
      this.form.userSubject = res.data.subjectID
      this.form.usercatalog = res.data.catalogID
      this.form.userCompanys = res.data.enterpriseID
      this.form.userCitys = res.data.province
      this.form.usercitys2 = res.data.city
      this.form.userDirection = res.data.direction
      // 将后台返回的数据进行数据类型转换
      this.form.userType = Number(res.data.questionType)
      this.form.userdifficulty = Number(res.data.difficulty)
      // 题干
      this.form.content1 = res.data.question
      this.form.videoURL = res.data.videoURL
      this.form.userAnswer = res.data.answer
      this.form.remarks = res.data.remarks // 备注
      this.form.userTag = res.data.tags
      // 选项
      this.form.userOptions = res.data.options
      // 多选框的数据回流
      this.form.userCheckList = this.form.userOptions.filter(item => item.isRight === 1).map(item => item.code)
      // 单选框的数据回流
      this.form.userCheck = this.form.userOptions.filter(item => item.isRight === 1).map(item => item.code)[0]
    } catch (err) {
      console.log(err)
    }
  },
  // 获取请求 学科列表
  async loadSubject() {
    try {
      const res = await simple()
      // 1. 请求成功 打印结果
      // console.log(res.data)
      // 2.将请求的结果赋值给数据项
      this.form.subjects = res.data
    } catch (err) {
      console.log(err)
    }
  },
  // 获取请求 企业列表
  async loadCompany() {
    try {
      const res = await list()
      // console.log(res)
      this.form.Companys = res.data.items
    } catch (err) {
      console.log(err)
    }
  },
  // 获取请求 所有的城市
  async loadCitys() {
    try {
      const res = await provinces()
      // console.log(res)
      this.form.citys = res
    } catch (err) {
      console.log(err)
    }
  },
  // 获取请求 方向
  loadDirection() {
    try {
      const res = direction
      // console.log(res)
      this.form.directions = res
    } catch (err) {
      console.log(err)
    }
  },
  // 图片上传成功的事件
  async  hUpload(fileObj) {
    const fd = new FormData()
    // 将选中的图片添加到fd对象中
    fd.append('photo', fileObj.file)
    console.log(fd)
    // 发送请求
  },
  // 点击选项添加按钮 进行选项的添加
  haddoption() {
    // 实现添加功能
    this.options.push({
      isRight: 'false',
      code: String.fromCharCode(this.options[this.options.length - 1].code.charCodeAt(0) + 1),
      title: '',
      imageUrl: ''
    })
  },
  // 单选框表单组发生变化发生的事件
  hradioChange(val) {
    // 1. 获取点击的 code 的值
    this.form.userCheck = val
    // 2. 更改option数据项
    this.options.map((item, index) => {
      if (item.code === val) {
        // 更改当前项的 isRight的值
        item.isRight = true
      } else {
        item.isRight = false
      }
    })
    // 将 isRight为true 的数组 进行筛选出来
    // 将数组赋值给数据项
    this.form.userOptions = this.options.filter(item => {
      return item.isRight === true
    })
  },
  //  多选框发生变化的时候 发生的事件
  hcheckboxChange(val) {
    this.form.userCheckList = val
    console.log(val)
    this.options.map((item, index) => {
      if (val.includes(item.code)) {
        // 更改当前的 isRight 值
        item.isRight = true
      } else {
        item.isRight = false
      }
    })
    // 将符合条件的数组筛选出来 赋值给数据线
    this.form.userOptions = this.options.filter(item => {
      return item.isRight === true
    })
  },
  // 数据验证以及表单数据获取
  doSave() {
    //  1. 进行表单验证
    this.$refs.form.validate(async(valid) => {
      if (valid) {
        // 2.表单验证通过 获取表单数据
        const data = {
          subjectID: this.form.userSubject,
          catalogID: this.form.usercatalog,
          enterpriseID: this.form.userCompanys,
          province: this.form.userCitys,
          city: this.form.usercitys2,
          direction: this.form.userDirection,
          questionType: '' + this.form.userType,
          answer: this.form.userAnswer,
          difficulty: '' + this.form.userdifficulty,
          question: this.form.content1,
          options: this.form.userOptions,
          tags: this.form.userTag
        }
        console.log('11111', data)
        // 3. 发送请求 提交数据
        const res = await add(data)
        console.log(res)
        // 4.请求成功 提示用户
        this.$message.success('试题录入成功')
        // 5. 请求成功 进行页面跳转
        this.$router.push('/questionBank')
        console.log('$router')
      } else {
        this.$message.error('失败了')
      }
    })
  },
  // 点击提交 -- 实现试题录入
  hSubmit() {
    this.$refs.form.validate(valid => {
      if (valid) {
        this.doSave()
      }
    })
  },
  // 点击 修改按钮 -- 实现试题修改
  hUpdate() {
    this.$refs.form.validate(valid => {
      if (valid) {
        this.doUpdate()
      }
    })
  },
  // 进行 修改 请求发送
  async  doUpdate() {
    // 获取请求参数
    const data = {
      subjectID: this.form.userSubject,
      catalogID: this.form.usercatalog,
      enterpriseID: this.form.userCompanys,
      province: this.form.userCitys,
      city: this.form.usercitys2,
      direction: this.form.userDirection,
      questionType: '' + this.form.userType,
      answer: this.form.userAnswer,
      difficulty: '' + this.form.userdifficulty,
      question: this.form.content1,
      options: this.form.userOptions,
      tags: this.form.userTag,
      id: Number(this.$route.query.id),
      videoURL: this.form.videoURL,
      remarks: this.form.remarks
    }
    const res = await update(data)
    console.log(res)
    // 1. 修改成功 提示用户修改试题成功
    this.$message.success('试题修改成功')
    // 2.清空表单内容
    this.$refs.form.resetFields()
    // 3.跳转到基础题库
    this.$router.push('/questions/list')
  }
}

</script>

<style scoped lang='less'>
/deep/ .ql-editor {
  height: 200px;
}
/deep/ .option_item {
  padding-bottom: 20px;
}
// 单选按钮
.el-radio-group .col {
  display: flex;
  flex-direction: column;
  .el-radio,
  .el-checkbox {
    margin-bottom: 30px;
    margin-right: 30px;
  }
  // 多选按钮
  .el-checkbox-grop .col {
    display: flex;
    flex-direction: column;
  .el-radio,
  .el-checkbox {
    margin-bottom: 30px;
    margin-right: 30px;
  }
  }
  .el-input {
    width: 300px;
  }
}
// 上传图片
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader {
  text-align: center;
  margin-left: 10px;
  display: inline-block;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  width: 100px;
  height: 60px;
  line-height: 60px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avater-text {
  font-size: 14px;
  color: #8c939d;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
